<template>
  <div class="container">
    <div class="form-container">
      <h3 class="title">微博前台系统</h3>
      <el-form
        :model="form"
        :rules="rules"
        label-width="70px"
        ref="ValidateForm"
      >
        <el-form-item prop="username" label="用户名:">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            type="text"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
            show-password
            prefix-icon="el-icon-key"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">登录</el-button>
          <!-- <p @click="toRegister">还没账号，去注册?</p> -->
          <el-button @click="toRegister" type="">注册?</el-button>
          <el-button @click="resetForm('ValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册组件 -->
    <Register :registerDialogVisible.sync="registerDialogVisible" />
  </div>
</template>

<script>
// 导入注册组件
import Register from './Register/register.vue'
// 导入请求文件的接口
import { toLogin } from '@/api/login'
// 导入本地存储的函数
import db from '@/util/localstorage'
export default {
  name: 'login',
  components: {
    Register
  },
  data() {
    return {
      registerDialogVisible: false,
      form: {
        username: '',
        password: ''
      },
      msg: 'hello',
      rules: {
        username: {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        password: {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }
      }
    }
  },
  methods: {
    // 登录的接口函数
    async onSubmit() {
      console.log(this.form)
      const res = await toLogin({ ...this.form })
      console.log('res', res)
      this.$message.success('登录成功')
      // 登录成功需要做的事情，将用户的一下基本信息保存到localstorage中，比如用户的姓名，token，id，然后跳转路由
      this.$store.commit('user/setUser', res.user)
      this.$store.commit('user/setToken', res.token)
      this.$store.dispatch('follow/getList', {
        id: res.user.id
      })
      this.$router.push('/home')
    },
    // 重置表单的函数
    resetForm(formName) {
      // 重置表单
      this.$refs[formName].resetFields()
    },
    // 注册
    toRegister() {
      this.registerDialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/img/background.jpg) no-repeat;
  .form-container {
    width: 20%;
    padding: 20px 10px;
    background: #fff;
    .title {
      text-align: center;
    }
  }
}
// .loginContainer {
//   width: 260px;
//   height: 300px;
//   padding: 0 36px;
//   background: #fff;
// }
</style>
